

/*声明 css相对定位的混合 */

@mixin pr(){
      position: relative;
   
}

/*  声明css绝对定位的混合 */

@mixin pa($y,$x){

	position: absolute;
	top: $y;
	left:$x;
}

@mixin bgImg($url,$y,$x,$wid,$height){

	background-image: url($url);
	background-position: $y $x;
	background-repeat: no-repeat;
	background-size: $wid $height;


}

@mixin bgImgs($url,$y,$x){

	background-image: url($url);
	background-position: $y $x;
	background-repeat: no-repeat;



}


header{

	width: 100%;
	@include bgImg('../images/index3_bg.jpg',left,top,100%,100%);
	float: left;
	@include pr();
	padding-top: 20px;
	padding-bottom: 90px;

	.head{
		width: 80%;
		margin: 0px auto;
		display: flex;
		justify-content:space-between;
	}
	.head>div{

		  flex-basis:45%;

		 
	}
    .head_nav{
    	flex:1;
    }
	.head_nav ul li{
		  	 float: left;
		  	 color: #fff;
		  	 margin-left: 30px;
		  }

   .head_nav ul li:last-of-type{

		position: relative;

		label{
           transition:all .3s linear;
			span{
		          width: 14px;
		          border:2px solid #fff;
		          display: block;
		          margin-top: 2px;
	         }
		}
		input{
			display: none;
		}

		 .nav{
                 position: absolute;
                 top: 20px;
                 left: 0px;
                 display: none;
                 transition:all .5s linear;
                 a{
                 	display: block;
                 	
                 	width: 150px;
                 	height: 50px;
                 	line-height: 50px;
                 	color: #fff;
                 	text-transform: lowercase;
                 	transition:all .3s linear;

                 }
                 a:hover{

                 	 color: #f57365;
                 }
		  	 }

		input:checked + label{

		   transform:rotate(90deg);
	    }

	     input:checked ~ .nav{

     	 display: block;
       }

	}


	
     
    

    .head_center{
    	width: 80%;
    	margin: 0px auto;
    	
    	.head_center_desc{
    		margin-top: 100px;
    		width: 100%;
    		color:#fff;
    		text-align: center;
    		
    	}
    	.head_head{
    		font-style: italic;
    		margin: 0px;
    		padding: 0px;
    		color: #e0d7d8;
    	}
    	.head_title{
    		padding: 0px;
    		margin: 0px;
    		font-size: 100px;
    	}
    	a{
    		padding: 0px 85px;
    		border:2px solid #fff;
    		font-size: 18px;
    		line-height: 40px;
    		color: #fff;
    	}
    	.head_title_desc{
    		font-size: 14px;
    	}
    }


}


.container{
	width: 100%;
	float: left;

	background: #fff;
	.con_box{
		
		
		
		width: 80%;
		margin: 0px auto;
		.con_box_text{
			width: 100%;
			display: flex;

			margin: 100px 0px;
            justify-content:space-between;

			div{
				flex-basis:32%;
				text-align: center;
				.con_head{
					width: 100px;
					height: 100px;
					border:3px solid #000;
					border-radius: 100%;
					@include bgImg('../images/con_head_bg.png',center,center,100%,100%);
				}
				.con_head1{
                    @include bgImg('../images/con_head_bg1.png',center,center,100%,100%);

				}
				.con_head2{
                    @include bgImg('../images/con_head_bg2.png',center,center,100%,100%);
				}
				p{
					font-size: 14px;
					word-break: break-all;
				}
				h4{
					@include bgImgs('../images/con_bottom.jpg',bottom,center);
					line-height: 20px;
					margin: 0px;
					padding: 10px 0px;
					font-size: 12px;
				}

			}
		}

		

	}
	

}

/*container end */

.app{

	width: 100%;
	background: #f7f7f7;
	float: left;
	padding-top: 100px;
	.app_box{
		width: 80%;
		margin: 0px auto;
	
		.app_flex{
	          width: 100%;
	          display: flex;
	          justify-content:space-between;
	      }
	      .app_flex>div{
	      	flex-basis:48%;
	      	.more a{
	      		width: 120px;
	      		height: 40px;
	      		
	      	}

	      	.more a:nth-of-type(1){
	      		@include bgImgs('../images/more1.jpg',center,center);
	      	}
	      	.more a:nth-of-type(2){
	      		@include bgImgs('../images/more2.jpg',center,center);
	      	}
	      }
	      .iphone_bg{
	      		@include bgImg('../images/iphon_bg.png',center,center,100%,100%);
	      	}
	      .app_flex_desc{
                 margin-bottom: 80px;
                 h4{
                 	margin-top: 70px;
                 	line-height: 25px;
                 	padding: 10px 0px;
                 	@include bgImgs('../images/con_bottom.jpg',left,bottom);
                 }
                 p{
			      	font-size: 12px;
			      	word-break: break-all;
			      }
	      }
	      

	}

}
/* app end */

.banner{
	width: 100%;
	float: left;
	padding: 0px;
	margin:0px;

}

.banner_box{
	width: 100%;
	@include pr();
	height: 220px;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
	input{
		display: none;
	}
	label{
		@include pa(80%,50%);
		display: block;
		width: 10px;
		height: 10px;
		border-radius: 100%;
		background: #756975;
		cursor: pointer;
		z-index: 9999;
		transition:all .3s linear;
	}

	


	#demo1{
		left: 48%;
	}
	#demo3{
		left: 52%;
	}
	.banner_boxs{
		width: 300%;
		display: flex;
		@include pa(0,0);
		transition:all .3s linear;
		
	}

     input[type="radio"]:checked + label{
		background: #fff;
	}
   
   #btn1:checked ~ .banner_boxs{

   	   left: 0%;
   }

   #btn2:checked ~ .banner_boxs{

   	   left: -100%;
   }
    #btn3:checked ~ .banner_boxs{

   	   left: -200%;
   }

	.banner_boxs>div{
			flex-basis:33.3%;
			img{
				width: 100%;
			
				
			}
		}
}

/* banner end */

.browse{
	width: 100%;
	float: left;

	.browse_title{
	width: 100%;
	text-align: center;
	 h4{
          margin-top: 100px;
          line-height: 25px;
          padding: 10px 0px;
          @include bgImgs('../images/con_bottom.jpg',center,bottom);
       }
}

	.browse_img{

         width: 100%;
         display: flex;
         flex-wrap:wrap;
	}
	.browse_img>div{
		flex-basis:20%;
		text-align: center;

		img{
			width: 100%;
			transition:all .3s linear;
		}

		img:hover{

			 opacity: .5;
		}
	}
}


/* browse end*/

.number{
	width: 100%;
	float: left;
	.number_box{
		width: 80%;
		margin:0px auto;
		.number_box_child{
			width: 100%;
			display: flex;

		}
		.number_box_child>div{
			flex-basis:20%;
			text-align: center;
			h2{
				margin-top: 60px;
				margin-bottom: 0px;
				padding: 0px;
			}
			p{
				margin: 0px;
				font-size: 14px;
			}
		}
	}
}

/*number end*/

footer{
	width: 100%;
	float: left;
	background: #f7f7f7;
	border-top: 1px solid #e2e2e2;
	padding: 40px 0px;
	.foot_box{
		width: 80%;
		margin: 0px auto;
		.foot_box_child{
			width: 100%;
			display: flex;
		}
		.foot_box_child>div{
			flex-basis:50%;
			color: #c5c5c5;
			font-size: 14px;
		}
		.foot_box_child>div:last-child{
			text-align: right;
			span{
				color:#000;
				font-weight: bold;
			}
		}
	}
}